<template>
  <el-drawer
    title="字典列表"
    :visible.sync="drawerItemVisible"
    class="el-drawer-style"
    :size="screenWidth"
    :destroy-on-close="true"
    @close="onClose"
  >
    <div
      :style="{
        padding:'20px',
        border: '1px solid #e9e9e9',
        background: '#fff',
        width:'97%',
        margin:'auto'
      }"
    >
      <div class="table-page-search-wrapper">
        <el-form ref="dataFrom" layout="inline" :model="temp.dic" @keyup.enter.native="">
          <el-row :gutter="10">
            <el-col :md="8" :sm="12">
              <el-form-item label="名称">
                <el-input style="width: 120px;" placeholder="请输入名称" />
              </el-form-item>
            </el-col>
            <el-col :md="8" :sm="24">
              <el-form-item label="状态">
                <el-select value="" placeholder="请选择" style="float: right;width: 120px">
                  <el-option value="1">正常</el-option>
                  <el-option value="0">禁用</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="8" :sm="24">
              <span style="float: left;" class="table-page-search-submitButtons">
                <el-button type="primary" @click="">搜索</el-button>
                <el-button type="primary" style="margin-left: 8px" @click="">重置</el-button>
              </span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="2" :sm="24">
              <el-button style="margin-bottom: 10px" type="primary" @click="handleAdd">新增</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div>
        <el-table
          ref="table"
          row-key="id"
          size="small"
          :row-class-name="getRowClassname"
          :header-cell-style="{background:'#FAFAFA'}"
        >
          <el-table-column
            label="ID"
            align="center"
            width="70px"
          >
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="名称" align="center">
            <template slot-scope="{}">
              <span>{{ row.item_text }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数值" align="center">
            <template slot-scope="{}">
              <span>{{ row.item_value }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="{$index}">
              <el-button size="samll" type="primary" icon="el-icon-edit" plain @click="">
                编辑
              </el-button>
              <el-button size="samll" type="danger" icon="el-icon-delete" plain @click="">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="dictiemquery.dictpagination.total>0"
          :total="dictiemquery.dictpagination.total"
          :page.sync="dictiemquery.dictpagination.page"
          :limit.sync="dictiemquery.dictpagination.limit"
          @pagination="dictItemList"
        />
      </div>
    </div>
  </el-drawer>
</template>

<script>
// import DictItemModal from '@/views/sys/dict/dictItemodal'
import Pagination from '@/components/Pagination'
import { dictItemPagination } from '@/api/article'

export default {
  name: 'DictItemList',
  components: { Pagination },
  data() {
    return {
      screenWidth: 600,
      drawerItemVisible: false,
      dictiemquery: {
        listitemquery: {
          id: undefined,
          dict_id: '',
          item_text: '',
          item_value: '',
          description: '',
          sort: null,
          status: null,
          updated_time: ''
        },
        dictpagination: {
          current: null,
          limit: 0,
          total: 0,
          pages: 0,
          page_info: {
            since_id: null,
            max_id: null
          },
          updated_time: ''
        }
      },
      temp: {
        dic: {
          id: undefined,
          dict_id: '',
          item_text: '',
          item_value: '',
          description: '',
          sort: '',
          status: '',
          updated_time: null
        }
      }
    }
  },
  created() {
    // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
    this.resetScreenSize()
    this.dictItemList()
  },
  methods: {
    dictItemList() {
      if (this.drawerItemVisible === true) {
        this.listLoading = true
        dictItemPagination(this.dictiemquery).then(response => {
          this.list = response.data.dic
          this.total = response.pagination.total
          this.dictiemquery.dictpagination = response.pagination
          this.dictiemquery.dictpagination.page = response.pagination.current
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 100)
        })
      }
    },
    edit() {
      this.drawerItemVisible = true
    },
    // 添加字典数据
    handleAdd() {
      this.$refs.modalForm.add(this.dictId)
      this.$refs.modalForm.title = '新增'
    },
    onClose() {
      this.visible = false
      this.form.resetFields()
      this.dataSource = []
    },
    // 抽屉的宽度随着屏幕大小来改变
    resetScreenSize() {
      const screenWidth = document.body.clientWidth
      if (screenWidth < 600) {
        this.screenWidth = screenWidth
      } else {
        this.screenWidth = '600px'
      }
    },
    getRowClassname(record) {
      if (record.status == 0) {
        return 'data-rule-invalid'
      }
    }
  }

}
</script>

<style scoped>

</style>
